<style>
    .Preview {
        display:              table;
        width:                100%;
        height:               100%;
        min-height:           10em;
        background-repeat:    no-repeat;
        background-size:      cover;
        position:             relative;
    }
    .Preview > span,  .Preview.empty:before  {
        display:           table-cell;
        text-align:        center;
        vertical-align:    middle;
    }
    .Preview.empty:before {
        content:          "+";
        font-size:        5em;
        color:            gray;
        border:           2px  dashed;
        border-radius:    5px;
    }
    .Preview > [type="file"] {
        position:    absolute;
        left:        0;
        top:         0;
        width:       100%;
        height:      100%;
        opacity:     0;
    }
</style>
<script src="index.js"></script>

<div class="Preview ${view.value ? '' : 'empty'}"
     style="background-image: url(${view.value})">

    <input type="file" name="${view.key}"
           required="${(! view.value) && view.required}"
           onchange="${view.preview}"
           style="display: ${view.value && (view.percent < 100) ? 'none' : ''}" />

    <span style="display: ${view.value && (! view.percent) ? '' : 'none'}">

        <input type="button" class="btn btn-primary" value="上传"
               onclick="${view.upload}" />

        <input type="button" class="btn btn-danger" value="清空"
               onclick="${view.clean}" />
    </span>

    <span style="display: ${view.percent && (view.percent < 100) ? '' : 'none'}">

        <progress value="${view.percent}" max="100"></progress>
    </span>
</div>
